<template>
    <div class="horizon">
    <div class="lefttree">
      <div class="left_title_bg">
        <div class="label_div"></div>
        <div class="flex1 label_tv">地区管理</div>
        <i class="el-icon-plus add_icon" @click="addCity"/>
      </div>
      <el-tree
        class="tree"
        :data="Treedata"
        node-key="id"
        :expand-on-click-node="false"
        :default-expanded-keys="firstClassNodeIds"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-nodes horizon" slot-scope="{ node, data }">
          <div class="title-label">{{ node.label }}</div>
          <!-- 判断是否是类别 -->
          <span v-if="node.level == 1">
            <i class="el-icon-plus span_icon color_blue" @click="() => addArea(node,data)"/>
            <i class="el-icon-edit-outline span_icon color_blue" @click="() => editCity(node,data)"/>
            <i class="el-icon-delete span_icon color_red" @click="() => rmCity(node,data)"/>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="flex1 marleft20">
      <div class="right_title_bg">
        <div class="label_div"></div>
        <div class="flex1 label_tv center_tv">地区管理列表</div>
      </div>
      <div class="table-content">
      <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="userName" label="城市" align="center"></el-table-column>
                <el-table-column prop="mobileNo" label="地区" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-lx-recharge"
                            class="orange mid"
                            @click="handleFee(scope.$index, scope.row)">运费</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            class="mid"
                            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red mid"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </div>
    </div>

    <!-- 新增和修改服务类别的dialog模态框-->
    <el-dialog
      :title="dialogBean.title"
      width="35%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dialogForm"
        label-width="120px"
        label-position="right"
      >
        <el-form-item :label="dialogBean.label" prop="name">
          <el-input
            v-model.trim="dialogForm.name"
            auto-complete="off"
            style="width:80%;"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button  @click.native="dialogVisible = false">取 消</el-button>
        <el-button  type="primary" @click.native="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
    name: 'areaTree',
    data() {
        return {
            Treedata:[],
            firstClassNodeIds: [],
            tableData:[],
            dialogVisible:false,
            dialogBean:{

            },
            dialogForm:{

            }

        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            this.$http.postHead('hgz/user/queryListWithPage',this.query).then(res =>{
                if(res.status){
                   
                }
            })
        },
        handleNodeClick(data, node, dom) {

        },
        addCity(){

        },
        addArea(node,data){

        },
        editCity(node,data){

        },
        rmCity(node,data){

        },
        handleFee(index,row){

        },
        handleEdit(index,row){

        },
        handleDelete(index,row){

        },
        submitForm(){

        }
        
    }
};
</script>

<style scoped>
 .horizon{
    display: flex;
    flex-direction: row;
  }
  .flex1{
    flex: 1;
  }
  .marleft20{
    margin-left: 20px;
  }
  .lefttree{
    width: 220px;
  }
  .center_tv{
    text-align: center;
  }
  .label_div{
    background: #0B80C0;
    width: 6px;
    height: 24px;
    margin-left: 12px;
    margin-right: 8px;
  }
  .left_title_bg{
    background: #B3E3F5;
    width: 220px;
    padding: 12px 0px;
    display: flex;
    flex-direction: row;
  }
  .right_title_bg{
    background: #B3E3F5;
    padding: 12px 0px;
    display: flex;
    flex-direction: row;
  }
  .label_tv{
    font-size: 16px;
    color: gray;
  }
  .add_icon{
    color: #0B80C0;
    font-size: 20px;
    margin-right: 12px;
    font-weight: bold;
    margin-top: 3px;
  }
  .title-label{
    width: 120px;
  }
  .span_icon{
    font-size: 16px;
    margin-right: 5px;
  }
  .item_icon{
    font-size: 20px;
    margin-right: 5px;
  }
  .color_blue{
    color: #0B80C0;
  }
  .color_red{
    color: #FF855F;
  }
  .tree{
    margin-top: 10px;
  }
  .table-content{
    margin-top: 10px;
  }
  .red {
    color: #ff0000;
  }
  .orange {
    color: orange;
  }
</style>
